<div id="" class="formio-component formio-component-form  formio-component-label-hidden" ref="component">
  <div class="formio-form" ref="webform" novalidate>
    <div id="text" class="form-group has-feedback formio-component formio-component-textfield formio-component-text " ref="component">
      <label class="col-form-label ">
        Text
      </label>
      <div ref="element">
        <input ref="input" name="data[text]" type="text" class="form-control" lang="en" spellcheck="true" value="Text Default"></input>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="text2" class="form-group has-feedback formio-component formio-component-textfield formio-component-text2 " ref="component">
      <label class="col-form-label ">
        Text
      </label>
      <div ref="element">
        <input ref="input" name="data[text2]" type="text" class="form-control" lang="en" spellcheck="true" value="Text Calculated Default"></input>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="number" class="form-group has-feedback formio-component formio-component-number formio-component-number " ref="component">
      <label class="col-form-label ">
        Number
      </label>
      <div ref="element">
        <input ref="input" name="data[number]" type="text" class="form-control" lang="en" inputmode="numeric" value="1"></input>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="textArea" class="form-group has-feedback formio-component formio-component-textarea formio-component-textArea " ref="component">
      <label class="col-form-label ">
        Text Area
      </label>
      <div ref="element">
        <textarea ref="input" name="data[textArea]" type="text" class="form-control" lang="en" spellcheck="true" rows="3">Area default</textarea>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="checkboxFalse" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxFalse " ref="component">
      <div class="form-check checkbox">
        <label class=" form-check-label">
          <input ref="input" name="data[checkboxFalse]" type="checkbox" class="form-check-input" lang="en" value="0">
          <span>Checkbox False</span>
          </input>
        </label>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="checkboxTrue" class="form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxTrue " ref="component">
      <div class="form-check checkbox">
        <label class=" form-check-label">
          <input ref="input" name="data[checkboxTrue]" type="checkbox" class="form-check-input" lang="en" value="0" checked=true>
          <span>Checkbox True</span>
          </input>
        </label>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="selectBoxes" class="form-group has-feedback formio-component formio-component-selectboxes formio-component-selectBoxes " ref="component">
      <label class="col-form-label ">
        Select Boxes
      </label>
      <div class="form-radio radio">
        <div class="form-check" ref="wrapper">
          <label class="form-check-label label-position-right" for="selectBoxes-one">
            <input ref="input" name="data[selectBoxes][]" type="checkbox" class="form-check-input" lang="en" value="one" checked=true id="selectBoxes-one">
            <span>One</span>
          </label>
        </div>
        <div class="form-check" ref="wrapper">
          <label class="form-check-label label-position-right" for="selectBoxes-two">
            <input ref="input" name="data[selectBoxes][]" type="checkbox" class="form-check-input" lang="en" value="two" id="selectBoxes-two">
            <span>Two</span>
          </label>
        </div>
        <div class="form-check" ref="wrapper">
          <label class="form-check-label label-position-right" for="selectBoxes-three">
            <input ref="input" name="data[selectBoxes][]" type="checkbox" class="form-check-input" lang="en" value="three" checked=true id="selectBoxes-three">
            <span>Three</span>
          </label>
        </div>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="radio" class="form-group has-feedback formio-component formio-component-radio formio-component-radio " ref="component">
      <label class="col-form-label ">
        Radio
      </label>
      <div class="form-radio radio">
        <div class="form-check" ref="wrapper">
          <label class="form-check-label label-position-right" for="radio-one">
            <input ref="input" name="data[radio][radio]" type="radio" class="form-check-input" lang="en" value="one" id="radio-one">
            <span>One</span>
          </label>
        </div>
        <div class="form-check" ref="wrapper">
          <label class="form-check-label label-position-right" for="radio-two">
            <input ref="input" name="data[radio][radio]" type="radio" class="form-check-input" lang="en" value="two" checked=true id="radio-two">
            <span>Two</span>
          </label>
        </div>
        <div class="form-check" ref="wrapper">
          <label class="form-check-label label-position-right" for="radio-three">
            <input ref="input" name="data[radio][radio]" type="radio" class="form-check-input" lang="en" value="three" id="radio-three">
            <span>Three</span>
          </label>
        </div>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="select" class="form-group has-feedback formio-component formio-component-select formio-component-select " ref="component">
      <label class="col-form-label ">
        Select
      </label>
      <select ref="selectContainer" name="data[select]" type="text" class="form-control" lang="en"></select>
      <input type="text" class="formio-select-autocomplete-input" ref="autocompleteInput" tabindex="-1" />
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="dateTime" class="form-group has-feedback formio-component formio-component-datetime formio-component-dateTime " ref="component">
      <label class="col-form-label ">
        Date / Time
      </label>
      <div ref="element">
        <div class="input-group">
          <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" value="2018-08-03T17:53:52.000Z"></input>
          <div class="input-group-append" ref="suffix">
            <span class="input-group-text">
    <i ref="icon" class="fa fa-calendar" style=""></i>
  </span>
          </div>
        </div>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="time" class="form-group has-feedback formio-component formio-component-time formio-component-time " ref="component">
      <label class="col-form-label ">
        Time
      </label>
      <div ref="element">
        <input ref="input" name="data[time]" type="time" class="form-control" lang="en" value="13:57"></input>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="day" class="form-group has-feedback formio-component formio-component-day formio-component-day " ref="component">
      <label class="col-form-label ">
        Day
      </label>
      <div class="row">
        <div class="col col-xs-4">
          <label for="day-month" class="">Month</label>
          <div><select ref="month" id="day-month" class="form-control" name="month" lang="en">
              <option value="">
              </option>
              <option value="1">
                January
              </option>
              <option value="2">
                February
              </option>
              <option value="3">
                March
              </option>
              <option value="4">
                April
              </option>
              <option value="5">
                May
              </option>
              <option value="6">
                June
              </option>
              <option value="7">
                July
              </option>
              <option value="8">
                August
              </option>
              <option value="9">
                September
              </option>
              <option value="10">
                October
              </option>
              <option value="11">
                November
              </option>
              <option value="12">
                December
              </option>
            </select>
            <input type="text" class="formio-select-autocomplete-input" ref="autocompleteInput" tabindex="-1" />
          </div>
        </div>
        <div class="col col-xs-3">
          <label for="day-day" class="">Day</label>
          <div>
            <input ref="day" id="day-day" class="form-control formio-day-component-day" type="number" placeholder="" step="1" min="1" max="31"></input>
          </div>
        </div>
        <div class="col col-xs-5">
          <label for="day-year" class="">Year</label>
          <div>
            <input ref="year" id="day-year" class="form-control formio-day-component-year" type="number" placeholder="" step="1" min="1900" max="2030"></input>
          </div>
        </div>
      </div>
      <input name="ctx.data[day]" type="hidden" class="form-control" lang="en" value="" ref="input">
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="currency" class="form-group has-feedback formio-component formio-component-currency formio-component-currency " ref="component">
      <label class="col-form-label ">
        Currency
      </label>
      <div ref="element">
        <input ref="input" name="data[currency]" type="text" class="form-control" lang="en" inputmode="numeric" value="$100.01"></input>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="signature" class="form-group has-feedback formio-component formio-component-signature formio-component-signature  formio-component-label-hidden signature-pad" ref="component">
      <div ref="element">
        <input ref="input" name="data[signature]" type="hidden" class="form-control" lang="en" value="Yes"></input>
        <div class="signature-pad-body" style="width: 100%;height: 150;padding:0;margin:0;" tabindex="0" ref="padBody">
          <a class="btn btn-sm btn-light signature-pad-refresh" ref="refresh">
            <i class="fa fa-refresh"></i>
          </a>
          <canvas class="signature-pad-canvas" height="150" ref="canvas"></canvas>
          <img style="width: 100%;display: none;" ref="signatureImage">
        </div>
        <div class="signature-pad-footer">
          Sign above
        </div>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="tags" class="form-group has-feedback formio-component formio-component-tags formio-component-tags " ref="component">
      <label class="col-form-label ">
        Tags
      </label>
      <div ref="element">
        <input ref="input" name="data[tags]" type="text" class="form-control" lang="en" value="one,two,three"></input>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="survey" class="form-group has-feedback formio-component formio-component-survey formio-component-survey " ref="component">
      <label class="col-form-label ">
        Survey
      </label>
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th></th>
            <th style="text-align: center;">A</th>
            <th style="text-align: center;">B</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>One</td>
            <td style="text-align: center;">
              <input type="radio" name="data[survey][one]" value="a" id="survey-one-a" ref="input">
            </td>
            <td style="text-align: center;">
              <input type="radio" name="data[survey][one]" value="b" id="survey-one-b" ref="input">
            </td>
          </tr>
          <tr>
            <td>Two</td>
            <td style="text-align: center;">
              <input type="radio" name="data[survey][two]" value="a" id="survey-two-a" ref="input">
            </td>
            <td style="text-align: center;">
              <input type="radio" name="data[survey][two]" value="b" id="survey-two-b" ref="input">
            </td>
          </tr>
        </tbody>
      </table>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="columns" class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden" ref="component">
      <div class="
    col-md-6
    col-md-offset-0
    col-md-push-0
    col-md-pull-0
  " ref="column-columns">
        <div id="textField" class="form-group has-feedback formio-component formio-component-textfield formio-component-textField " ref="component">
          <label class="col-form-label ">
            Text Field
          </label>
          <div ref="element">
            <input ref="input" name="data[textField]" type="text" class="form-control" lang="en" value="Column Default"></input>
          </div>
          <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
        </div>
      </div>
      <div class="
    col-md-6
    col-md-offset-0
    col-md-push-0
    col-md-pull-0
  " ref="column-columns">
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="fieldSet" class="form-group formio-component formio-component-fieldset formio-component-fieldSet " ref="component">
      <fieldset>
        <div class="fieldset-body" ref="nested-fieldSet">
          <div id="textField2" class="form-group has-feedback formio-component formio-component-textfield formio-component-textField2 " ref="component">
            <label class="col-form-label ">
              Text Field
            </label>
            <div ref="element">
              <input ref="input" name="data[textField2]" type="text" class="form-control" lang="en" value="Fieldset Default"></input>
            </div>
            <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
          </div>
        </div>
      </fieldset>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="panel" class="formio-component formio-component-panel formio-component-panel " ref="component">
      <div class="mb-2 card border">
        <div class="card-header bg-default" ref="header">
          <span class="mb-0 card-title">
    </span>
        </div>
        <div class="card-body" ref="nested-panel">
          <div id="textField3" class="form-group has-feedback formio-component formio-component-textfield formio-component-textField3 " ref="component">
            <label class="col-form-label ">
              Text Field
            </label>
            <div ref="element">
              <input ref="input" name="data[textField3]" type="text" class="form-control" lang="en" value="Panel Default"></input>
            </div>
            <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
          </div>
        </div>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="table" class="table-responsive formio-component formio-component-table formio-component-table  formio-component-label-hidden no-top-border-table" ref="component">
      <table class="table
  ">
        <tbody>
          <tr ref="row-table">
            <td ref="table-table-0">
            </td>
            <td ref="table-table-0">
              <div id="textField4" class="form-group has-feedback formio-component formio-component-textfield formio-component-textField4 " ref="component">
                <label class="col-form-label ">
                  Text Field
                </label>
                <div ref="element">
                  <input ref="input" name="data[textField4]" type="text" class="form-control" lang="en" value="Table Default"></input>
                </div>
                <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
              </div>
            </td>
            <td ref="table-table-0">
            </td>
          </tr>
          <tr ref="row-table">
            <td ref="table-table-1">
            </td>
            <td ref="table-table-1">
            </td>
            <td ref="table-table-1">
            </td>
          </tr>
          <tr ref="row-table">
            <td ref="table-table-2">
            </td>
            <td ref="table-table-2">
            </td>
            <td ref="table-table-2">
            </td>
          </tr>
        </tbody>
      </table>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="well" class="" ref="component">
      <div class="card card-body bg-light">
        <div ref="nested-well">
          <div id="textField5" class="form-group has-feedback formio-component formio-component-textfield formio-component-textField5 " ref="component">
            <label class="col-form-label ">
              Text Field
            </label>
            <div ref="element">
              <input ref="input" name="data[textField5]" type="text" class="form-control" lang="en" value="Well Default"></input>
            </div>
            <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
          </div>
        </div>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="container" class="form-group has-feedback formio-component formio-component-container formio-component-container  formio-component-label-hidden" ref="component">
      <div ref="nested-container">
        <div id="textField6" class="form-group has-feedback formio-component formio-component-textfield formio-component-textField6 " ref="component">
          <label class="col-form-label ">
            Text Field
          </label>
          <div ref="element">
            <input ref="input" name="data[container][textField6]" type="text" class="form-control" lang="en" value="Container Default"></input>
          </div>
          <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
        </div>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="dataGrid" class="form-group has-feedback formio-component formio-component-datagrid formio-component-dataGrid " ref="component">
      <label class="col-form-label ">
        Data Grid
      </label>
      <table class="table datagrid-table table-bordered
    ">
        <thead>
          <tr>
            <th class="">
              Text Field
            </th>
            <th>
            </th>
          </tr>
        </thead>
        <tbody ref="datagrid-dataGrid-tbody">
          <tr ref="datagrid-dataGrid-row">
            <td ref="datagrid-dataGrid">
              <div id="textField7" class="form-group has-feedback formio-component formio-component-textfield formio-component-textField7  formio-component-label-hidden" ref="component">
                <div ref="element">
                  <input ref="input" name="data[dataGrid][0][textField7]" type="text" class="form-control" lang="en" value="Datagrid Default"></input>
                </div>
                <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
              </div>
            </td>
            <td>
              <button type="button" class="btn btn-secondary formio-button-remove-row" ref="datagrid-dataGrid-removeRow">
                <i class="fa fa-times-circle-o"></i>
              </button>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3">
              <button class="btn btn-primary formio-button-add-row" ref="datagrid-dataGrid-addRow">
                <i class="fa fa-plus"></i> Add Another
              </button>
            </td>
          </tr>
        </tfoot>
      </table>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="submit" class="form-group has-feedback formio-component formio-component-button formio-component-submit  form-group" ref="component">
      <button ref="button" name="data[submit]" type="submit" class="btn btn-primary btn-md" lang="en">
        Submit
      </button>
      <div ref="buttonMessageContainer">
        <span class="help-block" ref="buttonMessage"></span>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
  </div>
  <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
</div>